<template>
    <div v-popover="popoverRef" v-click-outside="onClickOutside">
        <slot></slot>
    </div>

    <el-popover ref="popoverRef" trigger="click" title="" virtual-triggering persistent width="auto" v-if="!isLoginOut">
        <table>
            <tr>
                <td>
                    <div style="white-space: nowrap;">语言/language:&ensp;</div>
                </td>
                <td>
                    <el-switch v-model="language" class="ml-2" inline-prompt
                        style="--el-switch-on-color: #37cbf0; --el-switch-off-color: #3f90db"
                        :active-text="$t('text.language')" :inactive-text="$t('text.language')" />
                </td>
            </tr>
            <tr>
                <td>
                    <div style="white-space: nowrap;">{{ $t('text.Common.l57') }}:&ensp;</div>
                </td>
                <td>
                    <el-switch v-model="mapType" class="ml-2" inline-prompt
                        style="--el-switch-on-color: #37cbf0; --el-switch-off-color: #3f90db"
                        :active-text="$t('text.Common.l42')" :inactive-text="$t('text.Common.l43')" />
                </td>
            </tr>
        </table>
    </el-popover>

    <el-popover ref="popoverRef" trigger="click" title="" virtual-triggering persistent width="auto" v-if="isLoginOut">
        <div style="display:flex;flex-direction:column;align-items:center;gap:15px">
            <div style="white-space: nowrap;color:red">{{ $t('text.Common.l58') }}</div>

            <el-button type="primary" @click="confirm" plain :color="'#ec808d'" style="height:23px">{{
                $t('text.DialogLayout.l23') }}</el-button>
        </div>
    </el-popover>
</template>
  
<script setup>
import { ref, unref, watch, defineProps } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import config from '../../config.js'
import axios from 'axios';
import { ElMessage } from 'element-plus'
defineProps({
    isLoginOut: Boolean
})

const popoverRef = ref()
const i18n = useI18n()
const router = useRouter()

const language = ref(i18n.locale.value == 'zh' ? true : false)
const mapType = ref(localStorage.getItem("mapType") == 'mapkit' ? false : true)

const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
}

const confirm = () => {
    axios({
        url: config.api[0].apiUrl + "/opsli-boot/system/logout",
        method: 'post',
        headers: { 'T-Authorization': localStorage.getItem('token'), 'Accept-Language': localStorage.getItem("language") == null ? 'zh-CN' : localStorage.getItem("language") == 'zh' ? 'zh-CN' : 'en-US' },
    }).then((response) => {
        if (response.data.code == '0') {
            router.push('/login')
        }else{
            ElMessage.error({
                showClose: true,
                message: response.data.msg,
                type: 'error',
            })
        }
    }).catch((error) => {
        ElMessage.error({
            showClose: true,
            message: error.data.msg,
            type: 'error',
        })
    })
}

watch(language, (newVal) => {
    if (newVal) {
        i18n.locale.value = 'zh'
        localStorage.setItem('language', i18n.locale.value)
        router.go(0)
    } else {
        i18n.locale.value = 'en'
        localStorage.setItem('language', i18n.locale.value)
        router.go(0)
    }
    localStorage.removeItem('menuNavs')
})

watch(mapType, (newVal) => {
    if (newVal) {
        localStorage.setItem('mapType', 'amap')
        router.go(0)
    } else {
        localStorage.setItem('mapType', 'mapkit')
        router.go(0)
    }
})
</script>
  